<template>
  <div :class="{'English':languageData.id=='English'}">
    <section id="header">
     <HeaderPublc></HeaderPublc>
    </section>
    <section id="cent">
      <div class="box">
        <div class="center"  v-loading="loading" :element-loading-text="languageData.login.loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255,0.7)">
          <div class="clearfix">
            <div class="logoText logo" style="float: left;width: 100%">
              <img :src="loginImg" style="width: 100%"/>
            </div>
            <div class="cleae">
            </div>
          </div>
          <div class="saech">
            <div class="clearfix inputBox">
              <el-input class="saechIput name" v-model="fromData.userName" suffix-icon="el-icon-circle-close-outline" :placeholder="languageData.login.user"></el-input>
              <span class="clearName" v-on:click="fromData.userName = '';fromData.password = '' "></span>
              <p :class="{'error':error,'noterror':!error}"><span class="el-icon-warning" style="font-size: 14px;"></span> {{languageData.login.error }}</p>
            </div>
            <div class="clearfix" @keyup.enter='login()'>
              <el-input class="saechIput password" type="password" v-model="fromData.password" :placeholder="languageData.login.password"></el-input>
            </div>
            <div class="check"><el-checkbox class="saechIput check" v-model="remember">{{languageData.login.Automatic}}</el-checkbox></div>
            <el-button type="primary" class="saechBout"  v-on:click="login()"> {{languageData.login.login}} </el-button>
            <div class="clearfix goRegister">
              <div class="left" ><p>忘记密码？ </p></div>
              <div class="right" @click="goPage('register')"><p>去注册 </p></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="footer" :user="user"> </section>
  </div>
</template>
<style scoped>
  .H_ib_body {background: #e1e1e1 !important}
  .goRegister{ margin-top: 10px;font-size: 12px;color: #0d71b7}
  .goRegister p{ font-size: 12px;color: #0d71b7;cursor: pointer}
  .saech{ width:275px;margin: auto;padding-top: 30px; }
  .box{width: 275px;height: 313px;position: absolute;top: 50%;left: 50%;}
  .center{width: 275px;height: 313px;position: relative;top: -70%;left: -50%;}
  .logoText{text-align: center;color: #136eb4;font-size:24px;line-height: 50px;}
  .logo {margin: auto;font-size:60px;font-weight: bold;letter-spacing:5px;padding-top: 10px;padding-bottom: 10px;position: relative;top: 5px;}
  .saechIput{width: 275px;margin-right: 0px;position: relative;z-index: 10;margin:8px 0px;}
  .saechBout{width: 275px;font-size: 16px;}
  .check{text-align: left;width:100px;}
  .saechBout{background-color: #0e72b9 ; border-color: #0e72b9;margin-top: 15px;}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .inputBox{position: relative}
  .clearName{display:block; width: 16px;height: 16px;position: absolute;right: 10px;top: 20px;z-index: 100;cursor: pointer}
  .noterror{ display: none}
  .error{font-size: 12px;color: #c19500;position: absolute;top: 0px;width: 100%;left: -15px;
     animation: errorName 0.8s forwards;animation-fill-mode:forwards;opacity: 0
  }
  @keyframes errorName {
    form{top: 0px ; left: -15px;opacity: 0}
    to{ top: -18px;left: -15px ;opacity: 1; display: block}
  }
  /**英文样式覆盖**/
  .English .logoText{font-size: 16px;}
  .English .logo{font-size: 38px;}
</style>
<script>
  import HeaderPublc from '@/components/public/herder.vue'
  import Public from '@/vuex/public'
  import loginImg from '../../../static/img/icon/logo180.png'
  import { mapState, mapActions } from 'vuex'
  export default {
    name: 'my-login',
    data () {
      return {
        fromData: {
          userName: null, // 账号
          password: null, // 密码
          clientType: 1 // 客户端类型
        },
        remember: false, // 是否记住密码
        error: false, // 登陆是否成功
        defaultLayers: null,
        ui: null,
        list: [],
        bubble: null,
        routeInstructionsContainer: null,
        input: null,
        loading: false,
        loginImg: loginImg
      }
    },
    methods: {
      ...mapActions({
        lognPost: 'adminLoginFn'
      }),
      login () {
        if (this.fromData.userName && this.fromData.password) {
           this.loading = true
           this.lognPost(this.fromData)
        }
//        this.$router.push({ name: 'map' })
      },
      // 登陆成功
      userFn (res) {
        // 登陆不成功 直接跳出 给出提示
        this.loading = false
        if (res.status != 0) {

          if(res.code == 'loginError'){
               this.openError('服务器链接失败！')
          }else {
            this.error = true
            var that = this
            // 5秒后提示消失
            setTimeout(function () {
              that.error = false
            }, 5000)
          }

         return
        }
        // 登陆成功之后 保存token 和用户信息 到本地
        res.data.userName = this.fromData.userName
        var users = JSON.stringify(res.data)
        var token = res.data.token
        Public.publicLo.sessionStorageSav('token', token)
        Public.publicLo.sessionStorageSav('user', users)
        // 查看又没记住密码
        if (this.remember) {
          // 记住密码保存localStorage
          var data =  this.fromData
          data = JSON.stringify(data)
          localStorage.setItem('userData', data)
        } else {
          //  没记住密码保存空 localStorage
          localStorage.setItem('userData', '')
        }

        this.$router.push({ name: 'AdminOderList' })
        // if(res.data.type == 0){
        //
        // }
        // if(res.data.type == 1){
        //   this.$router.push({ name: 'AdminOderList' })
        // }
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message({
          message: text,
          type: 'error'
        })

      },
      goPage (name,a) {
        if(a){
          window.open(a)
        }
        this.$router.push({name: name})
      },
    },
    computed: {
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            dom.style = 'width:620px'
          }
//          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      user: function () {
        var parm = this.userData
        var res = false
        if (parm) {
          this.userFn(parm)
          res = true
        }
        return res
      },
      ...mapState([
        'language',
        'userData'
      ])
    },
    mounted () {
      // 配置顶部菜单
      var parm = {logo: false, login: false, us: true, language: true, user: false, nav: false}
      this.$store.commit('updateNave', parm)
      // 查看有无记自动登陆
      var user = localStorage.getItem('userData')
      // 判断有没记住密码
      if (user) {
        // 转换成对象
        user = JSON.parse(user)
        this.fromData = {
          userName: user.userName, // 账号
          password: user.password // 密码
        }
        this.remember = true
        // 两秒之后自动登陆
        var that = this
        setTimeout(function () {
          if (that.remember) {
            that.login()
          } else {
          }
        }, 5000)
      } else {
      }
    },
    components: {
       HeaderPublc: HeaderPublc
    }
  }
</script>

